/* 页面容器：纵向排列 */
.doc-page {
  flex-direction: column;
  flex: 1;
  background-color: #fbf9fe;
}

/* 每个展现以一行表示 */
.doc-row {
  border-top-width: 1px;
  border-top-color: rgb(187, 187, 187);
  flex-direction: column;
}
.doc-row-inline {
  border-top-width: 1px;
  border-top-color: rgb(187, 187, 187);
}

.doc-height {
  height: 150px;
}

.doc-visual {
  background-color: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.2);
  padding-top: 15px;
  padding-bottom: 15px;
}

.doc-m-r-20 {
  margin-right: 20px;
}

/* 每个展现中的文字描述 */
.doc-row-desc {
  color: #3d3d3f;
  padding: 10px 0 10px 20px;
  background-color: #f1ebeb;
}
.doc-row-desc-inline {
  color: #3d3d3f;
  padding: 10px 0 10px 20px;
  background-color: #f1ebeb;
  width: 300px;
}

/* Flex */
.flex-1{
  flex: 1;
}
.flex-row {
  flex-direction: row;
}
.flex-grow-1{
  flex-grow: 1;
}
.flex-column {
  flex-direction: column;
}
.justify-content-between {
  justify-content: space-between;
}
.align-item-start {
  align-items: flex-start;
}
.align-item-center{
  align-items: center;
}
.justify-content-center{
  justify-content: center;
}

.flex-wrap{
  flex-wrap: wrap;
}
.flex-nowrap{
  flex-wrap: nowrap;
}
.flex-wrapReverse{
  flex-wrap: wrap-reverse;
}

/* List */
.xui-list{
  flex-direction: column;
  flex: 1;
}

.xui-x-s {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
}
.xui-x-c {
  width: 100%;
  text-align: center;
  justify-content: center;
}
.xui-x-e {
  width: 100%;
  text-align: right;
  justify-content: flex-end;
}
.xui-y-s {
  align-items: flex-start;
}
.xui-y-c {
  align-items: center;
}
.xui-y-e {
  align-items: flex-end;
}

.xui-row {
  margin-top: 20px;
}
.xui-demo-head {
  margin-top: 50px;
}
.xui-demo-head-title {
  font-size: 45px;
  margin-top: 20px;
  color: #3c3a3a;
  padding: 10px 20px;
}
.xui-demo-head-desc {
  font-size: 30px;
  padding: 10px 20px;
  border-bottom-width: 1px;
  border-bottom-color: #d3d3d3;
  color: #908c8c;
}
.xui-demo-body {
}

.xui-col {
  flex-grow: 1;
}

/* 表单元素 */
.xui-input-group-col {
  margin-top: 30px;
  padding: 10px 30px;
  flex-direction: column;
}

.xui-input-group-row {
  margin-top: 30px;
  padding: 10px 30px;
  flex-direction: row;
}

.xui-input {
  border: 1px solid #cccccc;
  padding: 20px 30px;
  background-color: transparent;
  height: 80px;
}

.xui-input-round {
  border: 1px solid #cccccc;
  border-radius: 10px;
  padding: 20px 30px;
  background-color: transparent;
  height: 80px;
  font-size: 30px;
}

.xui-input-group-col-title {
  margin-bottom: 10px;
}

.xui-input-group-row-title {
  margin-right: 30px;
}

/* Tabs */
.xui-tab-bar {
  background-color: #ffffff;
}

.xui-tab-bar-text {
  text-align: center;
}

.xui-tab-bar-text:active {
  color: #0faeff;
}

/* Other */
.xui-text-bold {
  font-weight: bold;
}

.xui-div-left-right {
  flex-direction: row;
  justify-content: space-between;
}

/* Color */
.xui-color-0{
  color: #000000;
}
.xui-color-1{
  color: #ffffff;
}

/* bgColor */
.xui-bgColor-0{
  background-color: #000000;
}
.xui-bgColor-1{
  background-color: #ffffff;
}
/* Padding */
.xui-padding{
  padding: 30px;
}
.xui-padding-top{
  padding-top: 30px;
}
.xui-padding-right{
  padding-right: 30px;
}
.xui-padding-bottom{
  padding-bottom: 30px;
}
.xui-padding-left{
  padding-left: 30px;
}

/* Padding-s */
.xui-padding-s{
  padding: 15px;
}
.xui-padding-top-s{
  padding-top: 15px;
}
.xui-padding-right-s{
  padding-right: 15px;
}
.xui-padding-bottom-s{
  padding-bottom: 15px;
}
.xui-padding-left-s{
  padding-left: 15px;
}

/* Padding-m */
.xui-padding-m{
  padding: 20px;
}
.xui-padding-top-m{
  padding-top: 20px;
}
.xui-padding-right-m{
  padding-right: 20px;
}
.xui-padding-bottom-m{
  padding-bottom: 20px;
}
.xui-padding-left-m{
  padding-left: 20px;
}

/*Margin*/
.xui-margin{
  margin: 30px;
}
.xui-margin-top{
  margin-top: 30px;
}
.xui-margin-right{
  margin-right: 30px;
}
.xui-margin-bottom{
  margin-bottom: 30px;
}
.xui-margin-left{
  margin-left: 30px;
}

/*Margin-s*/
.xui-margin-s{
  margin: 15px;
}
.xui-margin-top-s{
  margin-top: 15px;
}
.xui-margin-right-s{
  margin-right: 15px;
}
.xui-margin-bottom-s{
  margin-bottom: 15px;
}
.xui-margin-left-s{
  margin-left: 15px;
}

/*Margin-m*/
.xui-margin-m{
  margin: 20px;
}
.xui-margin-top-m{
  margin-top: 20px;
}
.xui-margin-right-m{
  margin-right: 20px;
}
.xui-margin-bottom-m{
  margin-bottom: 20px;
}
.xui-margin-left-m{
  margin-left: 20px;
}

/* Width */
.xui-width-10{
  width: 10%;
}
.xui-width-20{
  width: 20%;
}
.xui-width-25{
  width: 25%;
}
.xui-width-30{
  width: 30%;
}
.xui-width-40{
  width: 40%;
}
.xui-width-50{
  width: 50%;
}
.xui-width-60{
  width: 60%;
}
.xui-width-70{
  width: 70%;
}
.xui-width-80{
  width: 80%;
}
.xui-width-90{
  width: 90%;
}
.xui-width-100{
  width: 100%;
}
/*Height*/
.xui-height-40{
  height: 40px;
}
.xui-height-60{
  height: 60px;
}
.xui-height-80{
  height: 80px;
}
.xui-height-100{
  height: 100px;
}
/* FontSize */
.xui-fontSize-20{
  font-size: 20px;
}
.xui-fontSize-25{
  font-size: 25px;
}
.xui-fontSize-30{
  font-size: 30px;
}
.xui-fontSize-35{
  font-size: 35px;
}
.xui-fontSize-40{
  font-size: 40px;
}


/* Border */
.xui-border{
  border-color: #dddddd;
  border-width: 1px;
}
.xui-border-top{
  border-color: #dddddd;
  border-top-width: 1px;
}
.xui-border-right{
  border-color: #dddddd;
  border-right-width: 1px;
}
.xui-border-bottom{
  border-color: #dddddd;
  border-bottom-width: 1px;
}
.xui-border-left{
  border-color: #dddddd;
  border-left-width: 1px;
}
/* BorderRadius */
.xui-bRadius-2{
  border-radius: 2px;
}
.xui-bRadius-4{
  border-radius: 4px;
}
.xui-bRadius-6{
  border-radius: 6px;
}
.xui-bRadius-8{
  border-radius: 8px;
}
.xui-bRadius-10{
  border-radius: 12px;
}
.xui-bRadius-14{
  border-radius: 14px;
}

/* Text */
.xui-text-center{
  text-align: center;
}
.xui-text-right{
  text-align: right;
}
.xui-text-left{
  text-align: left;
}
/* LineHeight */
.xui-line-height-35{
  line-height: 35px;
}
.xui-line-height-40{
  line-height:40px;
}
.xui-line-height-45{
  line-height:45px;
}
.xui-line-height-50{
  line-height:45px;
}

/* FontSize */
.xui-fontSize-20{
  font-size: 20px;
}
.xui-fontSize-25{
  font-size: 25px;
}
.xui-fontSize-30{
  font-size: 30px;
}
.xui-fontSize-35{
  font-size: 35px;
}
.xui-fontSize-40{
  font-size: 40px;
}

/* Display */
.xui-hidden{
  display: none;
}
.xui-show{
  display: flex;
}
